<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <p>async test</p>
     <div id="component">

     </div>
    <script>

         function waitHandle(){
             var dtd=$.Deferred()  //创建一个deferred对象

             var wait=function(dtd){  //要求传入一个deferred对象
                 var task=function(){
                     console.log('执行完成')
                     dtd.resolve()  //表示异步任务已经完成
                    //  dtd.reject()  // 表示异步任务失败或出错
                 }

                 setTimeout(task,2000)
                 return dtd  //要求返回 deferred 对象
             }

             //注意，这里一定要有返回值
             return wait(dtd)
         }

         var  w=waitHandle()
         w.then(function(){
             console.log('ok 1')
         },function(){
             console.log('err 1')
         }).then(function(){
             console.log('ok 2')
         },function(){
             console.log('err 2')
         }).then(function(){
             console.log('ok 3')
         },function(){
             console.log('err 3')
         })

    </script>
</body>
</html>